<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://47.106.66.89:8080/js/vue.min.js"></script>
    <script src="http://47.106.66.89:8080/js/axios.min.js"></script>
    <link href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
    <link rel="stylesheet" href="../css/userShow.css"/>
    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        body,html{
            width: 100%;
            height: 100%;
        }
        a{
            text-decoration: none;
            color: black;
        }
        ul li{
            list-style: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="top">
            <!--表单-->
            <el-form :inline="true"  class="demo-form-inline"  style="padding: 35px 50px;font-size: 20px">
                <el-form-item label="blog">
                    <el-input v-model="article.content" placeholder="blog"></el-input>
                </el-form-item>
                <el-form-item label="博主">
                    <el-input v-model="searchUname" placeholder="博主"></el-input>
                </el-form-item>

                <el-form-item label="类别">
                    <el-select v-model="value" placeholder="请选择" @change="chan">
                        <el-option
                                v-for="item in type"
                                :key="item.tid"
                                :value="item.tname"
                        >
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="状态" >
                    <el-select v-model="article.status" placeholder="请选择"style="width: 170px">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                </el-form-item>
                <el-date-picker
                        @change="changeTime"
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>
                <el-form-item>
                    <el-button type="primary" @click="query">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="empty">清空</el-button>
                </el-form-item>
            </el-form>
        </div>
        <!--表格-->
        <div class="bottom">
            <el-table v-if="allArticle.length>0"
                    :data="allArticle"
                    style="width: 100%;margin-top: 30px;margin-left: 120px;font-size: 16px">
                <el-table-column
                        prop="aid"
                        label="序号"
                        width="80">
                </el-table-column>
                <el-table-column
                        prop="userinfo.uname"
                        label="博主"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="typeinfo.tname"
                        label="类别"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="标题"
                        width="220">
                </el-table-column>
               <!-- <el-table-column
                        prop="content"
                        label="内容"
                        width="160">
                    <template slot-scope="scope" style="width: 200px; height: 100px;">
                        <span style="width: 300px;">{{scope.row.content.substring(0,10)+"..."}}</span>
                    </template>
                </el-table-column>-->
                <el-table-column
                        prop="content"
                        label="内容"
                        width="160">
                    <template slot-scope="scope">
                        <el-popover trigger="hover" placement="top">
                            <p style="width: 500px;min-height: 200px;font-size: 18px">{{scope.row.showcol}}</p>
                            <div slot="reference" class="name-wrapper">
                                    <span style="width: 300px;">{{scope.row.showcol.substring(0,10)+"..."}}</span>
                            </div>
                        </el-popover>
                    </template>
                </el-table-column>

                <el-table-column
                        prop="adate"
                        label="时间"
                        width="200">
                    <template slot-scope="scope" style="width: 200px; height: 100px;">
                        <span style="width: 200px;">{{scope.row.adate.replace("T"," ")}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        prop="pic"
                        label="首图"
                        width="180">
                    <template slot-scope="scope" style="width: 200px; height: 100px;">
                        <img  :src=`../../${scope.row.pic}` alt="" style="width: 150px; height: 75px;object-fit: revert">
                    </template>
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="状态"
                        width="100">
                    <template slot-scope="scope" style="width: 200px; height: 100px;">
                        <span style="width: 300px;">{{ (scope.row.status == 0) ? "已审核" : ((scope.row.status == 4) ? "私密" : ((scope.row.status == -1) ? "不通过" : "未审核")) }}</span>

                    </template>
                </el-table-column>
                <el-table-column label="操作"  width="200">
                    <template slot-scope="scope">
                        <el-popconfirm v-if="scope.row.status==1" @confirm="handleEdit(scope.row)"
                                title="确定该博客可以通过？"
                        >
                            <el-button slot="reference">通过</el-button>
                        </el-popconfirm>
                        <el-button v-else>通过</el-button>
                            <el-button type="danger" @click="noBlog(scope.row)">不通过</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="block" style="margin-left: 600px">
                <el-pagination
                        layout="prev, pager, next"
                        :page-size="page.size"
                        @current-change="changPage"
                        :total="page.total">
                </el-pagination>
            </div>
        </div>

        <el-dialog title="请选择不通过的理由" :visible.sync="diaFormVisible">
            <form>
                <input type="radio" name="gender" value="侵犯权益" v-model="radio" id="bu">
                <label for="bu">侵犯权益</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="色情低俗" v-model="radio" id="da">
                <label for="da">色情低俗</label><br>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="违法犯罪" v-model="radio" id="yan">
                <label for="yan">违法犯罪</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="政治敏感" v-model="radio" id="zuo">
                <label for="zuo">政治敏感</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="不实信息" v-model="radio" id="zhi">
                <label for="zhi">不实信息</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="网络暴力" v-model="radio" id="qi">
                <label for="qi">网络暴力</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="危害人生安全" v-model="radio" id="duo">
                <label for="duo">危害人生安全</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="未成年相关" v-model="radio" id="wei">
                <label for="wei">未成年相关</label>
                <el-divider></el-divider>
                <input type="radio" name="gender" value="血腥/暴力/恐怖" v-model="radio" id="xue">
                <label for="xue">血腥/暴力/恐怖</label>
            </form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateWei">取 消</el-button>
                <el-button type="primary" @click="update">确 定</el-button>
            </div>
        </el-dialog>
    </div>
<script>
    let app=new Vue({
        el:'#app',
        data:{
            value1:'',
            value:'',
            options: [{
                value: '0',
                label: '已审核'
            }, {
                value: '1',
                label: '未审核'
            }],
            article:{content:'',usid:'',tid:0,status:''},
            page:{page:1,size:6,total:0},
            type:'',              //类别
            allArticle:"",
            startDate:'',         //开始时间
            endDate:'',           //结束时间
            searchUname:''       ,  //搜素的名字
            diaFormVisible:false,
            radio:'',
            changeBlog:'',
        },
        methods:{
            updateWei(){
                this.diaFormVisible=false;
                this.radio='';
            },
            //得到类别
            getAlltype(){
                axios.get("../../getAllType").then(res=>{
                    this.type=res.data;
                })
            },
            //查询blog
            getAllArticle(){
                axios.post(`../../getAdminAllArticle?page=${this.page.page}&size=${this.page.size}&tid=${this.article.tid}&endDate=${this.endDate}&startDate=${this.startDate}&searchUname=${this.searchUname}`,this.article).then(res=>{
                    this.page.total=res.data.data.total;
                   this.allArticle=res.data.data.records;
                })
            },
            //点击查询
            query(){
                this.page.page=1;
                console.log(this.article)
                this.getAllArticle();
            },
            //审核
            handleEdit(art){
                console.log(art)
                axios.post(`../../other/article/statusByusid?status=${0}&content=${33}`,art).then(res=>{
                    if(res.data.code==1){
                        axios.post(`../../other/blog/sendEmailBlog?emailReceiver=3498922531@qq.com&status=${1}`,art).then(res=>{
                        })
                        this.$message.success(res.data.message);
                        this.getAllArticle();

                    }
                })
            },
            noBlog(row){
                if(row.status!=1){
                    this.$message.error("该博客已经审核过了，不能进行重复操作");
                    return;
                }
                this.diaFormVisible=true;
                this.changeBlog=row;
                //不通过


            },
            update(){
                console.log(this.changeBlog)
                axios.post(`../../other/article/statusByusid?status=${-1}&content=${this.radio}`,this.changeBlog).then(res=>{
                   if(res.data.code==1){
                       axios.post(`../../other/blog/sendEmailBlog?emailReceiver=3498922531@qq.com&status=${-1}&content=${this.radio}`,this.changeBlog).then(res=>{
                       })
                       this.$message.success(res.data.message);
                       this.getAllArticle();
                       this.diaFormVisible=false;
                       this.radio='';
                   }
               })
            },
            //分页查询
            changPage(page){
                //  window.location.reload();
                this.page.page=page;
                this.getAllArticle();
            },
            //清空
            empty(){
                this.article={content:'',usid:'',tid:0,adate:'',status:''};
                this.value1="";
                this.value="";
                this.searchUname="";
            },
            //选中类别事件
            chan(){
                for (let typeKey in this.type) {
                    if(this.type[typeKey].tname==this.value){
                        this.article.tid=Number(this.type[typeKey].tid)
                    }
                }
                console.log(this.article.tid)
            },
            //选中时间事件
            changeTime(){
                for (let i = 0; i < this.value1.length; i++) {
                    if(i==1){
                        this.endDate=this.formatDate(this.value1[i]);
                    }else{
                        this.startDate=this.formatDate(this.value1[i]);
                    }
                }
            },
           //时间解析
            formatDate(dateString) {
                // 解析日期字符串
                const date = new Date(dateString);
                // 获取年、月和日
                const year = date.getFullYear();
                const month = date.getMonth() + 1; // 月份从0开始，所以需要加1
                const day = date.getDate();
                // 格式化输出结果
                return `${year}-${month < 10 ? '0' + month : month}-${day < 10 ? '0' + day : day}`;
            },
        },
        created(){
            this.getAlltype();
            this.getAllArticle();
        }
    })
</script>
</body>
</html>